<%@ page contentType="text/html;charset=UTF-8" trimDirectiveWhitespaces="true"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<%@ include file="/WEB-INF/views/include/constrant.jsp"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link rel="stylesheet" href="${ctxStatic }/wx/css/pensonal.css" />
        <link href="${ctxStatic }/wx/mui/css/mui.min.css" rel="stylesheet" />
        <link rel="stylesheet" href="${ctxStatic }/wx/css/setting.css" />
		<script src="${ctxStatic }/zepto/zepto.js"></script>
		<script src="${ctxStatic }/wx/mui/js/mui.min.js"></script>
		<script src="${ctxStatic }/wx/mui/js/mui.view.js "></script>
		<script src="${ctxStatic }/wx/js/xiake.js"></script>
		<title>订单列表</title>
		<script>
			Zepto(function(){
				$('.account-top').click(function(){
					if(!$(this).find('.account-icon').hasClass('account-icog')){
						$(this).find('.account-icon').addClass('account-icog');
						$('.account-body').show(600);
					}else{
						$(this).find('.account-icon').removeClass('account-icog');
						$('.account-body').hide(600);
					}
					
				});
				//将表单序列化为json对象
			$.fn.serializeJson=function(){  
            var serializeObj={};  
            var array=this.serializeArray();  
            var str=this.serialize();  
            $(array).each(function(){  
                if(serializeObj[this.name]){  
                    if($.isArray(serializeObj[this.name])){  
                        serializeObj[this.name].push(this.value);  
                    }else{  
                        serializeObj[this.name]=[serializeObj[this.name],this.value];  
                    }  
                }else{  
                    serializeObj[this.name]=this.value;   
                }  
            });  
            return serializeObj;  
        }; 
			})
		</script>
    </head>
   <body class="mui-fullscreen">
		<!--页面主结构开始-->
		<div id="app" class="mui-views">
			<div class="mui-view">
				<div class="mui-navbar"></div>
				<div class="mui-pages"></div>
			</div>
		</div>
		<!--页面主结构结束-->
		<div id="distrib" class="mui-page">
			<div class="mui-navbar-inner mui-bar mui-bar-nav">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left"  style="color: #fff;">
					<span class="mui-icon mui-icon-left-nav"  style="color: #fff;"></span>我的
				</button>
				<h1 class="mui-center mui-title"  style="color: #fff;">分销</h1>
			</div>
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<ul class="mui-table-view">
							<li class="mui-table-view-cell" id="jd">
								<i class="person-ico">
									<img src="${ctxStatic }/wx/images/dingdan_fenxiao@2x.png" />
								</i>
								<a href="#distrib-a" class="mui-navigate-right">计拥订单</a>
							</li>
							<li class="mui-table-view-cell" id="tx">
								<i class="person-ico">
									<img src="${ctxStatic }/wx/images/tixian_fenxiao@2x.png" />
								</i>
								<a href="#distrib-b" class="mui-navigate-right">立即提现</a>
							</li>
							<li class="mui-table-view-cell" id="mes">
								<i class="person-ico">
									<img src="${ctxStatic }/wx/images/xinxie_fenxiao@2x.png" />
								</i>
								<a id="bank-cash" class="mui-navigate-right">提现信息</a>
							</li>
							<li class="mui-table-view-cell" id="jl">
								<i class="person-ico">
									<img src="${ctxStatic }/wx/images/jilu_fenxiao@2x.png" />
								</i>
								<a href="#distrib-d" class="mui-navigate-right">提现记录</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<div id="distrib-a" class="mui-page">
			<div class="mui-navbar-inner mui-bar mui-bar-nav">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left"  style="color: #fff;">
					<span class="mui-icon mui-icon-left-nav"  style="color: #fff;"></span>分销
				</button>
				<h1 class="mui-center mui-title"  style="color: #fff;">计拥订单</h1>
			</div>
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<ul class="mui-table-view billing-wrap" id="ul1"></ul>
					</div>
				</div>
			</div>
		</div>
		<div id="distrib-b" class="mui-page">
			<div class="mui-navbar-inner mui-bar mui-bar-nav">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left"  style="color: #fff;">
					<span class="mui-icon mui-icon-left-nav"  style="color: #fff;"></span>分销
				</button>
				<h1 class="mui-center mui-title"  style="color: #fff;">立即提现</h1>
			</div>
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<form class="mui-input-group drawal-box">
						    <div class="drawal-money">
						        <span> 可提现金额（元）</span>
						        <span id="money">￥</span>
						        <a href="#distrib-t-a">明细&nbsp;></a>
						    </div>
						    <p style="padding-top: 10px;">提现政策：可提现订单为上月前所有完单订单，可提现状态改变为每月9日</p>
						    <div class="drawal-btn">
						    	<a href="#distrib-t-b" id="xs">提现</a>
						    </div>
						</form>
					</div>
				</div>
			</div>
		</div>
		<div id="distrib-d" class="mui-page">
			<div class="mui-navbar-inner mui-bar mui-bar-nav">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left"  style="color: #fff;">
					<span class="mui-icon mui-icon-left-nav"  style="color: #fff;"></span>分销
				</button>
				<h1 class="mui-center mui-title"  style="color: #fff;">计拥订单</h1>
			</div>
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<ul class="mui-table-view " id="ul3"></ul>
					</div>
				</div>
			</div>
		</div>
	   <!--三级页面-->
	   <div id="distrib-t-a" class="mui-page">
			<div class="mui-navbar-inner mui-bar mui-bar-nav">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left"  style="color: #fff;">
					<span class="mui-icon mui-icon-left-nav"  style="color: #fff;"></span>立即提现
				</button>
				<h1 class="mui-center mui-title"  style="color: #fff;">订单明细</h1>
			</div>
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<ul class="mui-table-view billing-wrap" id="ul2"></ul>
					</div>
				</div>
			</div>
		</div>
	   <div id="distrib-t-b" class="mui-page">
			<div class="mui-navbar-inner mui-bar mui-bar-nav">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left"  style="color: #fff;">
					<span class="mui-icon mui-icon-left-nav"  style="color: #fff;"></span>立即提现
				</button>
				<h1 class="mui-center mui-title"  style="color: #fff;">结算信息</h1>
			</div>
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<form class="mui-input-group account-form" id="subForm" style="width: 100%;float: left;">
							<div class="account-top">
								<span class="account-img">
									<img src="${ctxStatic }/wx/images/yinlian_xinxijiesuan@2x.png" />
								</span>
								<span class="account-tit">提现至银行账户</span>
								<span class="account-icon">
									<i class="mui-icon mui-icon-arrowdown"></i>
								</span>
							</div>
							<div class="account-body" id="yhk"></div>
						</form>
					</div>
				</div>
			</div>
		</div>
	</body>	
		<script type="text/javascript">
			mui.init();
		//初始化单页view
		var viewApi = mui('#app').view({
			defaultPage: '#distrib'
		});
		//初始化单页的区域滚动
		mui('.mui-scroll-wrapper').scroll();
		var view = viewApi.view;
		(function($) {
			//处理view的后退与webview后退
			var oldBack = $.back;
			$.back = function() {
				if (viewApi.canBack()) { //如果view可以后退，则执行view的后退
					viewApi.back();
				} else { //执行webview后退
					oldBack();
				}
			};
		})(mui);
		//计佣订单列表
		$('#jd').on('tap', function() {
		mui.post('${ctxFront}/mobile/orderlist',{
					userId:'${sessionScope.front_user.id}',
				},function(d){
					if(d.code=='200'){
						appendData(d,"1");
					}else{
						mui.alert(d.message)
					}
		}, 'json');
		});
		//可提现金额
		$('#tx').on('tap', function() {
		mui.post('${ctxFront}/mobile/withdraw',{
					userId:'${sessionScope.front_user.id}',
				},function(d){
					if(d.code=='200'){
						var money = d.data.money;
						document.getElementById('money').innerHTML = money;
						appendData(d,"2");
					}else{
						mui.alert(d.message)
					}
		}, 'json');
		});
		//提现记录
		$('#jl').on('tap', function() {
		mui.post('${ctxFront}/mobile/withdrawrecord',{
					userId:'${sessionScope.front_user.id}',
					pageSize:500,
					pageNo:1
				},function(d){
					if(d.code=='200'){
						appendData3(d);
					}else{
						mui.alert(d.message)
					}
		}, 'json');
		});
		//填写信息,页面跳转
		$('#mes').on('tap', function() {
			window.location.href = "${ctxWx}/my/fxMesPage";
		});
		//提现信息,银行卡信息
		$('#xs').on('tap', function() {
		mui.post('${ctxFront}/mobile/extractinfo',{
					userId:'${sessionScope.front_user.id}',
				},function(d){
					if(d.code=='200'){
						appendData2(d);
					}else{
						mui.alert(d.message)
					}
		}, 'json');
		});
		function appendData(d,type){
		var sm = "";
		var table = "";
		if (type=='1') {
			table = document.getElementById("ul1");
			sm = d.data;
		} else if(type=='2'){
			table = document.getElementById("ul2");
			sm = d.data.info;
		}
		table.innerHTML = "";//清空数据
		if(sm!=null){
		for (var i=0;i<sm.length;i++) {
			var li = document.createElement("li");
			li.className = "mui-table-view-cell meter-list";
			var dateStr = getLocalTime(sm[i].createDate);
			var isBalance = "";
			//"isBalance":0未结算/1已结算
			if (sm[i].isBalance==0) {
					isBalance = "未结算";
				} else if(sm[i].isBalance==1){
					isBalance = "已结算";
			} 
			var str = "";
			str += "<div class='meter-ii'>";
            str += "<p><span class='meter-time'>"+dateStr+"</span></p>";
            str += "<p>";
            str += "<span class='meter-ti'>"+sm[i].orderName+"</span>";
            str += "<span class='meter-m'>￥"+sm[i].dueAmount+"</span>";
            str += "</p>";
            str += "<p>";
            str += "<span class='meter-number'>订单号 ："+sm[i].orderId+"</span>";
            if (type=='1') {
				str += "<span class='meter-no'>"+isBalance+"</span>";
			} 
            str += "</p>";
			str += "</div>";
			li.innerHTML = str;
	        table.appendChild(li);
		}
		}
	}	
		function appendData2(d){
		var sm = d.data;
		var table = document.getElementById("yhk");
		table.innerHTML = "";//清空数据
			var div = document.createElement("div");
			var str = "";
			str += "<div class='mui-input-row'>";
			str += "<label>账户名称</label>";
			str += "<input type='text' class='mui-input-clear' placeholder='请输入姓名' value='"+sm.bankName+"' name='bankName' />";
			str += "</div>";
			str += "<div class='mui-input-row'>";
			str += "<label>开户行</label>";
			str += "<input type='text' class='mui-input-clear' placeholder='请输入开户行' value='"+sm.bankPlace+"' name='bankPlace' />";
			str += "</div>";
			str += "<div class='mui-input-row'>";
			str += "<label>账户号</label>";
			str += "<input type='text' placeholder='请输入银行卡号' name='bankCard' value='"+sm.bankCard+"'/>";
			str += "</div>";
			str += "<div class='bank-btn'>";
			str += "<input type='button' value='提交申请' id='sub' />";
			str += "</div>";
			div.innerHTML = str;
	        table.appendChild(div);
	        $('#sub').on('tap', function() {
	        	var params = $('#subForm').serializeJson();
	        	mui.post('${ctxFront}/mobile/importwithdraw',{
	        		userId:'${sessionScope.front_user.id}',
	        		bankName:params.bankName,
	        		bankPlace:params.bankPlace,
	        		bankCard:params.bankCard,
	        		money:$('#money').text(),
	        		payWay:"1"
	        	},function(d){
	        		if(d.code=='200'){
						mui.alert("提交成功",function(){
							window.location.href = "${ctxWx}/pu/fxPage";
						})
					}else{
						mui.alert(d.message)
					}
	        	});
	        })
	}	
		function appendData3(d){
		var sm = d.data.info;
		var table = document.getElementById("ul3");
		table.innerHTML = "";//清空数据
		for (var i=0;i<sm.length;i++) {
			var li = document.createElement("li");
			var createTime = getLocalTime(sm[i].createTime);
			li.className = "mui-table-view-cell meter-list";
			var str = "";
			str += "<div class='meter-record'>";
	        str += "<div class='m-r-img'>";
	        str += "<img src='${ctxStatic }/wx/images/yinlian_xinxijiesuan@2x.png' />";
	        str += "</div>";
	        str += "<div class='meter-r-im'>";
	        str += "<p>"+sm[i].bankName+"</p>";
	        str += "<p>"+createTime+"</p>";
	        str += "</div>";
	        str += "<span class='meter-r-pay'>￥"+sm[i].money+"</span>";
			str += "</div>";
			li.innerHTML = str;
		    table.appendChild(li);
	    }
	}	
		//时间戳转时间格式
	function getLocalTime(nS) {  
		var date = new Date();  
	    date.setTime(nS);  
	    var y = date.getFullYear();      
	    var m = date.getMonth() + 1;      
	    m = m < 10 ? ('0' + m) : m;      
	    var d = date.getDate();      
	    d = d < 10 ? ('0' + d) : d;      
	    var h = date.getHours();    
	    h = h < 10 ? ('0' + h) : h;    
	    var minute = date.getMinutes();    
	    var second = date.getSeconds();    
	    minute = minute < 10 ? ('0' + minute) : minute;      
	    second = second < 10 ? ('0' + second) : second;     
	    return y + '-' + m + '-' + d+' '+h+':'+minute+':'+second;      
	};
		</script>
</html>
